<!-- 举报投诉 -->
<template>
  <view class="reportcomplaints">
    <view class="reportcomplaints-top">
      <view class="search-btn" @click="addBtn">新增</view>
    </view>
    <view class="card-list" v-if="dataList">
      <view v-for="(item, index) in dataList" :key="index">
        <view class="myRecommendation-box">
          <view class="myRecommendation-top-box">
            <view class="itemName-box">
              <view>{{ item.complaintType }}</view>
              <view class="tag" v-if="item.complaintMethod == '2'"> 匿 </view>
            </view>
            <!-- 待处理 -->
            <image
              class="goods-icon"
              v-if="item.complaintStatus == '2'"
              src="./../../static/daichuli.png"
            />
            <!-- 待确认 -->
            <image
              v-if="item.complaintStatus == '1'"
              class="goods-icon"
              src="./../../static/ordertobeconfirmed.png"
            />
            <!-- 处理中 -->
            <image
              class="goods-icon"
              v-if="item.complaintStatus == '3'"
              src="./../../static/ordersettle1.png"
            />
            <!-- 已完成 -->
            <image
              class="goods-icon"
              v-if="item.complaintStatus == '4'"
              src="./../../static/yiwancheng.png"
            />
          </view>
          <view class="content">
            {{ item.complaintContent }}
          </view>
          <view class="myRecommendation-bottom-box">
            <view class="u-flex">{{ item.createAt }}</view>
            <view class="myRecommendation-bottom-btns">
              <u-button
                v-if="item.complaintStatus == '4' && !item.solveSatisfy"
                :plain="true"
                :custom-style="btnCalss3"
                @click="handleSubmit(item)"
              >
                满意度评价
              </u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-empty
      text="列表为空"
      class="kong"
      mode="list"
      v-if="dataList.length === 0"
    ></u-empty>
    <u-loadmore
      v-if="dataList.length"
      bg-color="rgb(240, 240, 240)"
      :status="loadStatus"
    ></u-loadmore>
    <!-- 满意度评价弹窗-->
    <u-modal
      v-model="showModal"
      :width="'560'"
      :mask-close-able="true"
      :show-title="false"
      :showConfirmButton="false"
    >
      <view class="modal-content">
        <view class="modal-title">满意度评价</view>
        <view class="rate-list">
          <view
            class="rate-item"
            v-for="(item, index) in rateList"
            :key="index"
          >
            <view class="rate-content">
              <u-rate
                active-color="#FADB14"
                size="40"
                gutter="8"
                v-model="item.value"
              ></u-rate>
            </view>
          </view>
        </view>
      </view>
      <view
        style="
          display: flex;
          justify-content: space-around;
          padding-bottom: 20rpx;
        "
      >
        <u-button
          type="primary"
          shape="circle"
          plain
          style="width: 224rpx"
          @click="handleCancel"
          throttle-time="0"
          >取消
        </u-button>
        <u-button
          type="primary"
          shape="circle"
          style="width: 224rpx"
          @click="handleConfirm"
          throttle-time="0"
        >
          确定
        </u-button>
      </view>
    </u-modal>
  </view>
</template>
<script>
export default {
  data() {
    return {
      btnCalss3: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#4F87FE',
        color: 'white',
        boxSizing: 'border-box',
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loadStatus: 'loadmore',
      dataList: [],
      complaintId: undefined,
      taglistShow: true,
      showModal: false, //满意度评价弹窗
      rateList: [{ title: '满意度评价', value: 0 }],
      reportingtypeList: [],
    }
  },
  onReachBottom() {
    if (this.taglistShow) {
      this.showLoading()
      this.loadStatus = 'loading'
      setTimeout(() => {
        this.pageNum++
        uni.stopPullDownRefresh()
        this.getDataList()
        this.loadStatus = 'nomore'
      }, 1000)
    } else {
      this.loadStatus = 'nomore'
    }
  },
  // 强制下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1
    this.pageSize = 10
    // this.showLoading()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.getDataList()
    }, 1000)
  },
  onLoad() {
    this.getDictData('complaint_type')
  },
  onShow() {
    this.pageNum = 1
    this.getDataList()
  },
  methods: {
    addBtn() {
      uni.navigateTo({
        url: `/pages/mycommon/reportcomplaintsadd`,
      })
    },
    // 查询字典
    async getDictData(type) {
      const { code, result, message } = await this.$u.get(
        `/freight-auth/dictValue/type/${type}`
      )
      // 举报类型：complaint_type_***
      if (code === '0') {
        if (type == 'complaint_type') {
          this.reportingtypeList = result.map((item) => {
            return {
              label: item.labelDefault,
              value: item.value,
            }
          })
        }
      } else {
        this.$api.msg(message)
      }
    },
    complaintTypeDictionaryparsing(val) {
      let text
      this.reportingtypeList.forEach((item) => {
        if (item.value == val) {
          text = item.label
        }
      })
      return text
    },
    hideLoading() {
      uni.hideLoading()
    },
    //根据登录用户查询举报投诉
    async getDataList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightComplaint/complaintPage',
        params
      )
      if (code === '0') {
        this.hideLoading()
        this.taglistShow = result.records.length ? true : false
        this.loadStatus =
          result.records.length < this.pageSize ? 'nomore' : 'loadmore'
        if (this.pageNum == 1) {
          this.dataList = result.records
        } else {
          this.dataList = this.dataList.concat(d_resNull(result.records))
        }
        this.total = result.total
      } else {
        this.hideLoading()
        this.$api.msg(message)
      }
    },
    //评分弹窗开启
    handleSubmit(val) {
      this.complaintId = val.complaintId
      this.showModal = true
    },
    //评分弹窗取消
    handleCancel() {
      this.showModal = false
    },
    //评分弹窗确认
    async handleConfirm() {
      if (this.rateList[0].value) {
        const data = {
          complaintId: this.complaintId,
          operateType: '5',
          solveSatisfy: this.rateList[0].value,
        }
        const { code, result, message } = await this.$u.post(
          '/freight-business/freightComplaint/complaintEvaluate',
          data
        )
        if (code === '0') {
          this.$api.msg('评价成功')
          this.showModal = false
          this.getDataList()
        } else {
          this.$api.msg(message)
        }
      } else {
        this.$api.msg('请选择分数')
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.reportcomplaints {
  min-height: 1600rpx;
  background-color: rgb(238, 238, 239);
  padding-top: 8rpx;
  padding-bottom: 200rpx;
  .card-list {
    margin: 0 16rpx;
  }
  .reportcomplaints-top {
    display: flex;
    justify-content: flex-end;
    font-size: 30rpx;
    cursor: pointer;
    color: #4f87fe;
    margin: 0 30rpx;
  }
  .myRecommendation-box {
    background: white;
    border-radius: 10rpx;
    padding: 0 16rpx;
    margin: 16rpx 0;
    .myRecommendation-top-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      .itemName-box {
        display: flex;
        align-items: center;
        .tag {
          font-size: 24rpx;
          background: #4f87fe;
          color: white;
          height: 40rpx;
          width: 40rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10rpx;
        }
      }
      .goods-icon {
        width: 115rpx;
        height: 108rpx;
      }
    }
    .content {
      border-top: 1px solid #e5e5e5;
      font-size: 24rpx;
      line-height: 33rpx;
      color: #000;
    }
    .myRecommendation-bottom-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
    }
  }
  .modal-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 22rpx;
  }
  .modal-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
    line-height: 40rpx;
    margin-bottom: 16rpx;
    margin-top: 20rpx;
  }
  .rate-content {
    padding: 40rpx 0;
  }
}
</style>
